<script setup>
const props = defineProps({
  rowData: {
    type: Object,
    reuired: true,
  },
})
</script>

<template>
  <a :href="props.rowData.link" class="friend-link">
    <div class="friend-link-icon">
      <i :class="props.rowData.icon"></i>
    </div>
    <div class="friend-link-content">
      <div class="friend-link-name">
        {{ props.rowData.author
        }}<span v-if="props.rowData.type === 'moment'"> · {{ props.rowData.date }}</span>
      </div>
      <div class="friend-link-desc">{{ props.rowData.context }}</div>
    </div>
  </a>
</template>

<style scoped>
.friend-link {
  display: flex;
  align-items: center;
  padding: 12px 15px;
  margin-bottom: 10px;
  background: rgba(var(--bg-darker-rgb), 0.1);
  border-radius: 12px;
  transition: var(--transition);
  text-decoration: none;
  color: var(--text);
}

.friend-link:hover {
  background: rgba(var(--primary-rgb), 0.15);
  transform: translateX(5px);
}

.friend-link-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  margin-right: 12px;
  flex-shrink: 0;
}

.friend-link-content {
  flex-grow: 1;
}

.friend-link-name {
  font-weight: 500;
  margin-bottom: 4px;
}

.friend-link-desc {
  font-size: 13px;
  color: var(--gray);
}
</style>
